<style>
	.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
        height: 120px;
        margin-top: -16px;
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
        background: #fff;
        padding: 16px;
    }

    .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
        border-color: transparent;
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
        border-color: #fff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #fff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
        border-top: 1px solid #3399ff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #3399ff;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<template>

	<Row style="min-width:780px">
		<Col span="24" class="demo-tabs-style1" style="padding:16px;">


		<Tabs>
			<TabPane label="中文">
				<Form ref="formCn" :model="formCn" :label-width="60">
					<Form-item label="内容详情" prop="content">
						<quill-editor v-model.trim="formCn.content" ref="myQuillEditorCn" :options="editorOption">
						</quill-editor>
					</Form-item>
					<Button @click="submitCn" type="primary">提交</Button>
				</Form>
			</TabPane>
			<TabPane label="English">
				<Form ref="formEn" :model="formEn" :label-width="60">
					<Form-item label="内容详情" prop="content">
						<quill-editor v-model.trim="formEn.content" ref="myQuillEditorEn" :options="editorOption">
						</quill-editor>
					</Form-item>
					<Button @click="submitEn" type="primary">提交</Button>
				</Form>
			</TabPane>
		</Tabs>
		</Col>
	</Row>
</template>

<script>
	import {
		getExhibitionOutlineCn,
		updateExhibitionOutlineCn,
		getExhibitionOutlineEn,
		updateExhibitionOutlineEn,
	} from "@/api/index";
	import {
		editorOption
	} from "@/api/quill";
	export default {
		name: "exhibition-outline",
		data() {
			return {
				formCn: {
					content: '',
				},
				formEn: {
					content: '',
				},
				editorOption: editorOption
			};
		},
		methods: {
			init() {
				getExhibitionOutlineCn().then(res => {
					if (res.success == true && res.result) {
						this.formCn.content = res.result.content;
					}

				});
				getExhibitionOutlineEn().then(res => {
					if (res.success == true && res.result) {
						this.formEn.content = res.result.content;
					}

				});
			},
			submitCn() {
				updateExhibitionOutlineCn({
					content: this.formCn.content
				}).then(res => {
					if (res.success == true) {
						this.$Message.success('提交成功');
					}
				});
			},
			submitEn() {
				updateExhibitionOutlineEn({
					content: this.formEn.content
				}).then(res => {
					if (res.success == true) {
						this.$Message.success('提交成功');
					}
				});
			},
		},
		mounted() {
			this.init();
		}
	};
</script>
